<template>
  <div class="header">
    <div class="header-l">
      <div></div>
    </div>
    <div class="header-m">
      <div class="spe">
        <span>
         国科中心科技成果转化在线服务平台运营监控系统
        </span>
      </div>
    </div>
    <div class="header-r">
      <span class="time">{{ time }}</span>
      <span class="Separator">/</span>
      <span class="data">{{ data }}</span>
      <span class="week">{{ week }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "web-head",
  data() {
    return {
      time: "",
      data: "",
      week: "",
    };
  },
  mounted() {
    this.getCurrentTime();
    clearInterval(myTimeDisplay);
    let myTimeDisplay = setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },
  methods: {
    getCurrentTime() {
      let self = this;
      //获取当前时间
      let date = new Date();
      let year = date.getFullYear(); //当前年份
      let month = date.getMonth(); //当前月份
      let data = date.getDate(); //天
      let hours = date.getHours(); //小时
      let minute = date.getMinutes(); //分
      let second = date.getSeconds(); //秒
      if (hours <= 9) {
        hours = "0" + hours;
      }
      if (minute <= 9) {
        minute = "0" + minute;
      }
      if (second <= 9) {
        second = "0" + second;
      }
      var day = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[day];
      let time = hours + ":" + minute + ":" + second;
      let newData = year + "-" + (month + 1) + "-" + data;
      self.time = time;
      self.data = newData;
      self.week = week;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  background-image: linear-gradient(to right, #0a1e41 , #011B3B);
  .header-l {
    width: 22.6111111vw;
    height: 100%;
    background: url("../assets/img4.png") no-repeat;
    background-size: 100% auto;
    background-position: top;
    position: relative;
    div{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 99;
    }
  }
  .header-m {
    flex: 1;
    font-size: 1.528vw;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    
    letter-spacing: 0.208vw;
    line-height: 6.54320988vh;
    text-align: center;
    background: url("../assets/img2.png") no-repeat;
    background-size: 100% auto;
    background-position: bottom;
    .spe {
      background: -webkit-linear-gradient(
          -30deg,
          rgba(255, 255, 255, 0) 40px,
          rgba(0, 183, 255, .8) 80px,
          rgba(0, 183, 255, .8) 60px,
          rgba(255, 255, 255, 0) 120px
        ) -20.833vw 0 no-repeat;
      animation-name: light;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      background-position: 0px 0vw;
      span{
         background-image:-webkit-linear-gradient(top,rgba(255, 255, 255, 1),rgba(155, 204, 255, 1));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
        font-weight: bold;
        text-shadow:  0px 2px 16px rgba(255,255,255,.2);

      }
    }
  }
  .header-r {
    width: 22.6111111vw;
    background: url("../assets/img3.png") no-repeat;
    background-size: 100% auto;
    background-position: top;
    line-height: 6.54320988vh;
    text-align: right;
    padding-right: 1.083vw;
    box-sizing: border-box;
    .time {
      font-size: 1.25vw;
      font-family: DINPro-Medium, DINPro;
      font-weight: 500;
      color: #79c4ff;
    }
    .Separator {
      color: #00dfff;
      font-size: 0.972vw;
      box-sizing: border-box;
      padding: 0 0.417vw;
    }
    .data {
      font-size: 0.764vw;
      color: #79c4ff;
    }
    .week {
      color: #79c4ff;
      font-size: 0.764vw;
      display: inline-block;
      margin-left: 0.278vw;
    }
  }
}
@keyframes light {
  0% {
    background-position: 5vw 0px;
  }
  100% {
    background-position: 43.097vw 0px;
  }
}
</style>